<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#jgb{
			width: 50px;
			height: 500px;
			border: 1px solid black;
			margin: 10px auto;
			/*让元素相对于现在的位置进行平移*/
			/*transform: translate(100px,50px);*/
			/*缩放*/
			/*transform: scale(1.8,0.6);*/
			/*扭曲*/
			transform: skew(30deg,30deg);
		}
		#jgb div:nth-child(1){
			width: 50px;
			height: 100px;
			background: yellow;
		}
		#jgb div:nth-child(2){
			width: 50px;
			height: 270px;
			background: red;
			color: yellow;
			font-size: 30px;
			font-family: "微软雅黑";
			text-align: center;
			padding-top: 30px;
		}
		#jgb div:nth-child(3){
			width: 50px;
			height: 100px;
			background: yellow;
		}
	</style>
	</head>
	<body>
		
		<div id="jgb">
			<div></div>
			<div>如意金箍棒</div>
			<div></div>
		</div>
		
		
	</body>
</html>
